import { useCallback } from 'react'
import { useState, memo } from 'react'

// eslint-disable-next-line react/display-name
const Input = memo((params) => {
	console.log('子组件重新渲染了')
	const { onChange } = params
	return <input type="text" onChange={onChange} />
})

function UseCallBack() {
	const [count, setCount] = useState(0)

	/**
	 * 缓存函数，因为函数也是引用类型，所以传递给被 memo 包裹的子组件时，
	 * 子组件还是会重新渲染，因为引用类型地址发生了变化，
	 * 可以通过 useCallback 缓存要传递的函数，避免子组件重新渲染。
	 */
	const onChange = useCallback((value) => {
		console.log(value)
	}, [])

	return (
		<>
			<h2>UseCallBack</h2>
			<hr />
			<Input onChange={onChange} />
			<p>count: {count}</p>
			<button onClick={() => setCount(count + 1)}>add</button>
		</>
	)
}

export default UseCallBack
